<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<head class="b">
    <meta charset="UTF-8">
    <meta name="Author" content="个人主页">
    <title>个人主页</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/home.css"/>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        a{
            text-decoration: none;
            color: black;
        }
        .row > ul > li {
            text-align: center;
        }

        .row > ul > li:hover {
            background: #169ed8;
        }
        .block > img{
            width: 100%;
            height: 180px;
        }
        .description{
            text-indent: 2em;
        }
    </style>
</head>
<body>

<div class="row">
    <jsp:include page="leftbar.jsp"/>
    <div class="col-10">
        <div>
            <header class="header">
                <div class="nav-box">
                    <span>个人主页</span>
                    <ul class="nav">
                        <li><a href="${pageContext.request.contextPath}/home/edit">编辑资料</a> <a href="${pageContext.request.contextPath}/affair/logout">注销登录</a></li>
                    </ul>
                </div>
            </header>
            <div class="banner">欢迎来到我的主页</div>
            <div class="introduce">
                <div class="introduce-tit">
                    关于我
                </div>
                <div class="introduce-main">
                    <div class="l">
                        <img src="${pageContext.request.contextPath}/img_res/${user.icon.path}" width="220"
                             alt="无图片">
                    </div>
                    <div class="r">
                        <p>昵称: ${user.nickname}</p>
                        <p>性别: ${user.gender}</p>
                    </div>
                </div>
            </div>
            <div class="main-box">
                <div class="flex-box">
                    <%--        userShotBlogList--%>
                    <c:choose>
                        <c:when test="${userShotBlogList!=null}">
                            <c:forEach items="${userShotBlogList}" var="shotBlog">
                                <div class="blog col-3" onclick="toDetails(${shotBlog.blogId})">
                                    <div class="block col-12">
                                        <c:if test="${shotBlog.images.size()>0}">
                                            <img src="${pageContext.request.contextPath}/img_res/${shotBlog.images.get(0).path}" alt="id: ${shotBlog.blogId}没有图片">
                                        </c:if>
                                        <c:if test="${shotBlog.images.size()==0}">
                                            <img src="${pageContext.request.contextPath}/img/cat1.jpg" alt="">
                                        </c:if>
                                    </div>
                                    <div class="description">${shotBlog.content}</div>
                                </div>
                            </c:forEach>
                        </c:when>
                        <c:otherwise>
                            随拍列表为空
                        </c:otherwise>
                    </c:choose>
                </div>

            </div>
        </div>
    </div>
</div>
<script>
    function toDetails(id) {
        $(location).attr("href",'${pageContext.request.contextPath}/open/shotBlog/'+id)
    }
</script>
</body>

</html>